<template>
	<Header />
	<div class="ele-admin-main" style="background-color: #f1f1f1;">
		<div class="ele-admin-body">
			<div class="ele-admin-content">
				<div class="ele-admin-content-view">
					<div class="ele-body" style="margin-left: 300px;margin-right: 300px;">
						<a-card style="margin-top: 20px;">
							<div style="height: 150px;background: #1E9FFF;"></div>
							<div style="height: 50px;">
								<div class="header-info-avatar"><img :src="strategyData.image"></div>
								<div class="header-info-btn">
									<span class="name">{{ strategyData.name }}</span><br />
								</div>
								<div class="header-info-desc">
									<p>{{ strategyData.description }}</p>
								</div>
								<div class="header-info-desc">
									<a-tag color="pink">发布时间：{{ strategyData.createTime }}</a-tag>
									<a-tag color="red">发布人：{{ strategyData.createUser }}</a-tag>
									<a-tag color="green">出发日期：{{ strategyData.departTime }}</a-tag>
									<a-tag color="green">游玩天数：{{ strategyData.days }}</a-tag>
								</div>
							</div>
						</a-card>
						<a-card style="width: 100%;margin-top: 20px;">
							<a-row type="flex" style="margin-bottom:20px ;">
								<a-col flex="auto">
									<a-card-meta>
										<template #title>
											{{ strategyData.name }}
										</template>
									</a-card-meta>
								</a-col>
							</a-row>
							<a-divider />
							<a-typography style="margin-top: 20px;">
								<!-- 详细内容 -->
								<div class="neirong" v-html="strategyData.content"></div>
							</a-typography>
						</a-card>
						<a-crad title="Card title" style="width: 100%;margin-top: 20px;">
							<a-comment>
								<template #avatar>
									<a-avatar :src="loginUser.avatar" />
								</template>
								<template #content>
									<a-form-item>
										<a-textarea v-model:value="form.comment" :rows="4" :placeholder="placeholder" />
									</a-form-item>
									<a-form-item>
										<a-button html-type="submit" type="primary" @click="handleSubmit">
											评论
										</a-button>
									</a-form-item>
								</template>
								<a-comment v-for="(item, index) in commentList">
									<template #author>
										{{ item.createUser }}
									</template>
									<template #datetime>
										{{ item.createTime }}
									</template>
									<template #content>
										<div v-html="item.comment"></div>
									</template>
								</a-comment>
							</a-comment>
						</a-crad>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive, computed } from 'vue'
	import { getStrategy } from '@/api/neirong/strategy';
	import { listComments, addComment } from '@/api/neirong/comment';
	import Header from '../header.vue';
	import { useRoute } from 'vue-router';
	import {
		useUserStore
	} from '@/store/modules/user';
	import type {
		Comment
	} from '@/api/neirong/comment/model';
	import {
		message
	} from 'ant-design-vue';

	// 获取用户存储
	const userStore = useUserStore();

	const strategyId = ref();
	// 当前用户信息
	const loginUser = computed(() => userStore.info ?? {});

	const strategyData = ref({});
	const commentList = ref([]);

	// 表单数据
	const form = reactive<Comment>({
		id: undefined,
		sid: '',
		comment: '',
		createUser: '',
	});

	// 初始化
	onMounted(() => {
		let route = useRoute();
		strategyId.value = route.params.id;
		getStrategy(route.params.id).then((res) => {
			strategyData.value = res;
		});
		const queryParam = ref({
			'sid': route.params.id
		});
		listComments(queryParam.value).then((res) => {
			commentList.value = res;
		})
	});

	const handleSubmit = () => {
		if (loginUser.value.userId) {
			form.userId = loginUser.value.userId;
			form.sid = strategyId.value;
			form.createUser = loginUser.value.nickname;
			addComment(form).then((msg) => {
				message.success(msg);
				const queryParam = ref({
					'sid': strategyId.value
				});
				listComments(queryParam.value).then((res) => {
					commentList.value = res;
				})
			})
				.catch((e) => {
					message.error(e.message);
				});
		} else {
			message.error("请先登录！");
		}
	}
</script>

<style scoped>
	.header-info-avatar {
		margin-top: -90px;
		left: 30px;
		float: left;
		position: relative;
		border: 1px solid #f3f3f3;
		padding: 3px;
		background-color: #fff;
		border-radius: 4px;
	}

	.header-info-avatar img {
		width: 150px;
		height: 150px;
		border-radius: 4px;
	}

	.header-info-btn {
		margin-left: 220px;
		padding-top: 20px;
	}

	.header-info-btn .name {
		font-size: 22px;
		color: #333;
		float: left;
		margin-right: 5px;
	}

	.bbs-header-info-btn .btn1 {
		margin-left: 20px;
		margin-top: 1px;
		margin-right: 20px;
	}

	.bbs-header-info-btn .btn2 {
		margin-left: 20px;
		margin-top: 1px;
		margin-right: 20px;
		float: right;
	}

	bbs-follow-info {
		font-size: 12px;
		line-height: 30px;
		margin-left: 20px;
		float: left;
	}

	.bbs-follow-info span {
		margin-right: 10px;
	}

	.bbs-follow-info span m {
		color: #f00;
	}

	.header-info-desc {
		margin-left: 220px;
		float: left;
	}
</style>